//bsp init
$.material.init();

//存放数据
var data=[];
var people = new Array();


$(function(){
	$("#nameO").bind("focus",function(){
		$(this).next("span").removeClass('show').addClass("hide");
	});
	$("#nameT").bind("focus",function(){
		$(this).next("span").removeClass('show').addClass("hide");
	});

	//添加
	$("#confirm").bind("click",function(){
		
		if($("#nameO").val() == '') {
			$("#nameO").next("span").removeClass('hide').addClass("show");
			return;
		}
		if($("#nameT").val() == '') {
			$("#nameT").next("span").removeClass('hide').addClass("show"); 
			return;
		}
		
		if($("#selectRelation  option:selected").val() < 0){
			alert("清先选择关系?");
			return;
		}
		var size = {
			"nameO":$("#nameO").val(),
			"nameT":$("#nameT").val(),
			"relation":$("#selectRelation  option:selected").text()
		};

		data.push(size);

		var html = "<tr><td>"+data.length+"</td><td>"
		+$("#nameO").val()+"</td><td>"
		+$("#selectRelation  option:selected").text()+"</td><td>"
		+$("#nameT").val()+"</td><td><a class='del' len="+data.length+" >删除</a></td></tr>";

		$("#tbodyRelation").append(html);
		
		//judge persons
		var existO = 0, existT = 0;
		if($("#nameO").val() == $("#nameT").val()){
			existT = 1;
		}
		
		for(var i=0;i<people.length;i++){
			if($("#nameO").val() == people[i]){
				existO = 1;
			}
			if($("#nameT").val() == people[i]){
				existT = 1;
			}	
		}
		if(existO == 0) {
			people.push($("#nameO").val());
			
			//search relevant people from jiapu 
//			$.post( 	
//					basepath+"/relation/mapName",
//					{"name": $("#nameO").val()},
//			   	     function(data){
//						
//			   	    	if(data=='0'){
//			   	    		$("#tbodyPerson").append("<tr><td>"+$("#nameO").val()+"</td><td><input style='width:800px' type='text' id='des"+$("#nameO").val()+"'></td></tr>");
//			   	    	} else{
//			   	    		//alert(data);
//			   	    		data = eval("("+data+")");
//	    					for(var i = 0;i<data.length;i++){
//                                var name = data[i].split("--");
//	    						if(i==0){
//	    							$("#tbodyPerson").append("<tr><td>"+$("#nameO").val()+"</td><td><input style='width:800px' type='text' id='des"+
//		    								$("#nameO").val()+"' value='Mapped to: "+ name[1] +"'></td></tr>");
//	    						}else{
//	    							$("#tbodyPerson").append("<tr><td></td><td><a style='width:800px' type='text' id='des"+
//		    								$("#nameO").val()+"' value='Mapped to: "+ name[1] +"'></td></tr>");
//	    						}			
//	    					}
//			   	    	}
//			   	     }
//			);	
		}
		if(existT == 0) {
			people.push($("#nameT").val());
			//search relevant jiapu
//			$.post( 	
//					basepath+"/relation/mapName",
//					{"name": $("#nameT").val()},
//			   	     function(data){
//						
//			   	    	if(data=='0'){
//			   	    		$("#tbodyPerson").append("<tr><td>"+$("#nameT").val()+"</td><td><input style='width:800px' type='text' id='des"+$("#nameT").val()+"'></td></tr>");
//			   	    	} else{
//			   	    		//alert(data);
//			   	    		data = eval("("+data+")");
//	    					for(var i = 0;i<data.length;i++){
//                                var name = data[i].split("--");
//	    						if(i==0){
//	    							$("#tbodyPerson").append("<tr><td>"+$("#nameT").val()+"</td><td>" +
//                                        "Mapped to: <a target='_blank' href=\"http://jp.library.sh.cn/jp/service/work/list#uri=" + name[0] + "\">" + name[1] + "</a>" +
//                                        "</td></tr>");
//	    						}else{
//	    							$("#tbodyPerson").append("<tr><td></td><td>" +
//                                        "Mapped to: <a target='_blank' href=\"http://jp.library.sh.cn/jp/service/work/list#uri=" + name[0] + "\">" + name[1] + "</a>" +
//                                        "</td></tr>");
//	    						}			
//	    					}
//			   	    	}
//			   	     }
//			);	
		}
	});
	
	
	

	//删除--事件委托
	$("#tbodyRelation").bind("click",function(e){
		if(e.target && e.target.nodeName == "A") {
		 	var len = $(e.target).attr("len") - 1;
		 	data.splice(len,1,null);
		 	$(e.target).closest('tr').remove(); 
		}
	});
});




var d3Tree = function (){
	var width = 500,
	height = 500;

	var tree = d3.layout.tree()
	  .size([width, height-200])
	  .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); });

	var diagonal = d3.svg.diagonal()
	  .projection(function(d) { return [d.y, d.x]; });

	var svg = d3.select("#d3").append("svg")
	  .attr("width", width)
	  .attr("height", height)
	  .append("g")
	  .attr("transform", "translate(60,0)");



	d3.json("json/city_tree.json", function(error, root) {

	  var nodes = tree.nodes(root);
	  var links = tree.links(nodes);
	  
	  console.log(nodes);
	  console.log(links);
	  
	  var link = svg.selectAll(".link")
	    .data(links)
	    .enter()
	    .append("path")
	    .attr("class", "link")
	    .attr("d", diagonal);
	  
	  var node = svg.selectAll(".node")
	    .data(nodes)
	    .enter()
	    .append("g")
	    .attr("class", "node")
	    .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
	  
	  node.append("circle")
	    .attr("r", 4.5);
	  
	  node.append("text")
	    .attr("dx", function(d) { return d.children ? -8 : 8; })
	    .attr("dy", 3)
	    .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
	    .text(function(d) { return d.name; });
	  });
}

//解析json
d3Tree();